<template>
  <div class="dataStatistics">
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="$route.meta.title"
    >
      <template v-if="$store.state.user.show">
        <svg-icon icon-class="change" class="add" @click.native="changeLocation" />
      </template>
    </header-bar> -->
    <div class="content">
      <div v-if="chartLine1">
        <div class="title">
          <div>

            隔离总人数与新增统计
          </div>
        </div>
        <div
          ref="chartLine1"
          class="cardEcharts"
        />
      </div>
      <div v-if="chartLine66">
        <div class="title">
          <div>

            入境人员统计
          </div>
        </div>
        <div
          ref="chartLine66"
          class="cardEcharts"
        />
      </div>
      <div v-if="chartLine666">
        <div class="title">
          <div>

            累计境内外隔离人数
          </div>
        </div>
        <div
          ref="chartLine666"
          class="cardEcharts"
        />
      </div>
      <div v-if="chartLine6">
        <div class="title">
          <div>
            今日解除与全部解除隔离人员统计
          </div>
        </div>
        <div
          ref="chartLine6"
          class="cardEcharts"
        />
      </div>
      <div v-if="chartLine2">
        <div class="title">
          <div>隔离统计情况</div>
        </div>
        <div
          ref="chartLine2"
          class="cardEcharts"
        />
      </div>

      <div v-if="chartLine3">
        <div class="title">

          <div>隔离原因</div>
        </div>
        <div
          ref="chartLine3"
          class="cardEcharts"
        />
      </div>
      <div>
        <van-cell class="van-field van-field--error" :value="adressName" title="国家" is-link @click="changeLocation" />
        <van-cell v-if="isShow" style="margin-top:10px;" class="van-field van-field--error" title="始发地" :value="fromArea" is-link @click="getChioocePlace()" />
        <div style="display:flex;justify-content:center;margin-top:10px;">
          <van-button type="info" size="small" @click="cancel">重置</van-button>
        </div>
      </div>
      <div v-if="chartLine4" style="margin-top:10px;">
        <div class="title">

          <div>隔离人员始发地</div>

        </div>

        <div
          ref="chartLine4"
          class="cardEcharts"
        />
      </div>
      <!-- <div v-if="chartLine6666">
        <div class="title">
          <div>

            隔离统计
          </div>
        </div>
        <div
          ref="chartLine6666"
          class="cardEcharte"
        />

      </div> -->
      <div>
        <!-- <ve-table style="width:400px;oadding-bottom:100px;" :columns="columns" :table-data="tableData" /> -->
        <vxe-table ref="xTable" :data="tableData">
          <vxe-column field="organizationName" fixed="left" width="66" title="区县" />
          <vxe-column field="currentIsoCount" width="126" title="当前隔离人数" />
          <vxe-column field="sumIsoCount" width="126" title="累计隔离人数" />
          <vxe-column field="todayAddIsoCount" width="126" title="今日新增隔离" />
          <vxe-column field="todayRemoveIsoCount" width="126" title="今日解除人数" />
          <vxe-column field="sumRemoveIsoCount" width="126" title="累计解除隔离" />
          <vxe-column field="todayAddWithinIsoCount" width="126" title="今日新增境内" />
          <vxe-column field="todayAddOutIsoCount" width="126" title="今日新增境外" />
          <vxe-column field="isoCount" width="126" title="隔离点数量" />
          <vxe-column field="" width="126" title="房间总数" />

        </vxe-table>
      </div>
      <!-- <div ref="chart" style="width:500px;height:500px" /> -->
    </div>

    <div v-if="!chartLine1&&!chartLine2&&!chartLine3&&!chartLine4">
      <van-empty description="暂无数据" />
    </div>
    <van-popup v-model="timeShow" position="bottom" :style="{ height: '50%' }">
      <van-area
        title="省市区"
        :area-list="areaLists"
        value="500000"
        @confirm="confirmAdress"
        @cancel="cancelAdress"
      />
    </van-popup>
    <van-popup v-model="changeShow" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="国家"
        show-toolbar
        :columns="columnReson"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>

</template>

<script>
import Vue from 'vue'

import { Toast, Dialog, Icon, List, Empty, Popup, Cell, Area, Picker, Button } from 'vant'
Vue.use(Toast).use(Dialog).use(Icon).use(List).use(Empty).use(Popup).use(Cell).use(Area).use(Picker).use(Button)
import $api from '@/api/index'
import { mapGetters } from 'vuex'
import { geolocation } from '@/utils/nation'
import { areaList } from '@/utils/locationmsg'
export default {
  name: 'Source',
  data() {
    return {
      columns: [
        {
          field: 'organizationName',
          key: 'a',
          title: '区县',
          align: 'center'
        },
        {
          field: 'currentIsoCount',
          key: 'b',
          title: '当前隔离人数',
          align: 'left'
        },
        {
          field: 'todayAddIsoCount',
          key: 'c',
          title: '今日新增隔离',
          align: 'right'
        },
        { field: 'sumIsoCount', key: 'd', title: '累计隔离人数' },
        { field: 'todayRemoveIsoCount', key: 'e', title: '今日解除人数' },
        { field: 'sumRemoveIsoCount', key: 'f', title: '累计解除隔离' },
        { field: 'todayAddWithinIsoCount', key: 'g', title: '今日新增境内' },
        { field: 'todayAddOutIsoCount', key: 'h', title: '今日新增境外' },
        { field: 'isoCount', key: 'h', title: '隔离点数量' }
      ],
      tableData: [],
      countData: '', // 隔离总人数
      NewAddData: '', // 新增统计情况
      FromAreaData: [], // 隔离人员始发地统计√
      ByTypeData: [], // 隔离类型统计√
      DetailData: '', // 解除隔离统计情况
      reportIds: '',
      chartLine1: true,
      chartLine2: true,
      chartLine3: true,
      chartLine4: true,
      chartLine6: true,
      chartLine66: true,
      chartLine666: true,
      chartLine6666: true,
      nation: geolocation,
      areaLists: areaList,
      fromArea: '',
      timeShow: false,
      columnReson: [{ text: '中国', id: '中国' }, { text: '其它', id: '其它' }],
      changeShow: false,
      adress: '',
      adressName: '',
      isShow: false,
      countAreaScopeArr: []
    }
  },
  beforeCreate() {
    this.$dd.showTitleBar()
  },
  mounted() {
    this.$dd.setTitle({ title: this.$route.query.type ? this.$route.query.titleName : '全市数据统计' })
    this.countIsolate()
    this.getCountAreaScope()
    this.daily()
    this.cumulativeCountAreaScope()
    this.countSituationByFromArea()
    this.countSituationByType()
    this.queryQuarantineDetail()
    this.removeCount()
    this.getEacharts()

    // this.getEachart4()

    // this.getEachart3()

    // // 新增统计情况
    // this.getEachart1()

    // // 隔离总人数

    // // 解除隔离统计情况
    // this.getEachart2()
    // $api.user.queryQuarantineDetail({ reportIds: this.reportIds }).then(res => {
    //   this.DetailData = res.data
    // })
  },
  computed: {
    ...mapGetters([
      'reportId'
    ])
  },
  methods: {
    countIsolate() {
      $api.user.countIsolate({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.countData = res.data
        this.countSituationNewAdd()
      })
    },
    getCountAreaScope() {
      $api.user.countAreaScope({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.countAreaScopeArr = res.data
        this.drawLine66([res.data.today, res.data.all])
      })
    },
    cumulativeCountAreaScope() {
      $api.user.cumulativeCountAreaScope({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.drawLine666([res.data.withinCount, res.data.outSideCount])
      })
    },
    daily() {
      $api.user.daily({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        // this.drawLine6666(res.data)
        this.tableData = res.data
      })
    },
    countSituationByFromArea() {
      $api.user.countSituationByFromArea({ reportIds: this.$route.query.type ? this.reportId : this.reportIds, area: this.fromArea, national: this.adressName }).then(res => {
        this.FromAreaData = res.data
        this.drawLine4(this.FromAreaData)
      })
    },
    countSituationByType() {
      $api.user.countSituationByType({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.ByTypeData = res.data
        this.drawLine3(this.ByTypeData)
      })
    },
    countSituationNewAdd() {
      $api.user.countSituationNewAdd({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.NewAddData = res.data
        this.drawLine1([this.countData, this.NewAddData])
      })
    },
    queryQuarantineDetail() {
      $api.user.queryQuarantineDetail({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.DetailData = res.data
        this.drawLine2(this.DetailData)
      })
    },
    removeCount() {
      $api.user.removeCount({ reportIds: this.$route.query.type ? this.reportId : this.reportIds }).then(res => {
        this.drawLine6([res.data.today, res.data.all])
      })
    },
    getChioocePlace() {
      this.timeShow = true
    },
    confirmAdress(arg) {
      const arr = []
      arg.forEach(res => {
        arr.push(res.name)
      })
      this.fromArea = arr.join('-')
      this.countSituationByFromArea()
      this.timeShow = false
    },
    cancelAdress() {
      this.timeShow = false
    },
    changeLocation() {
      this.changeShow = true
    },
    onConfirm(value, index) {
      this.adress = value.text
      this.adress = value.text
      this.adressName = value.id
      if (value.text === '中国') {
        this.isShow = true
      } else {
        this.fromArea = ''
        this.isShow = false
      }
      // if (this.person.dictValue && this.arrQuarant.indexOf(this.person.dictValue) > -1) {
      //   this.person.fromArea = '请选择始发地'
      // }
      this.changeShow = false
      this.countSituationByFromArea()
    },
    onCancel() {
      this.changeShow = false
    },

    cancel() {
      this.fromArea = ''
      this.adressName = ''
      this.countSituationByFromArea()
    },
    getEacharts() {
      const myChart = this.$echarts.init(this.$refs.chart)
      var option = ''
      option = {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    drawLine1(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine1)
      let arr = []
      if (val.length !== 0) {
        this.chartLine1 = true
        arr = [...val[0], ...val[1]]
      }
      var option = {
        grid: { // 图表和父盒子之间的距离
          left: '10%',
          right: '8%',
          bottom: '8%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['隔离总人数', '隔离中人数', '昨日新增', '今日新增'],
          interval: 0
        },
        yAxis: {
          type: 'value'
        },
        series: [{

          data: arr,
          type: 'bar',
          barWidth: 30,
          barCategoryGap: '20%',
          itemStyle: { // 上方显示数值
            normal: {
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }]
      }
      myChart.setOption(option, true)
    },
    drawLine2(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine2)
      if (val.length !== 0) {
        this.chartLine2 = true
      }
      console.log(val)
      const arr = [{ value: val.quarantineEnd, name: '解除隔离人员占比' }, { value: val.quarantineRuning, name: '隔离人员占比' }]
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '隔离人员统计占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 16 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20px',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: arr
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine3(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine3)
      if (val.length !== 0) {
        this.chartLine3 = true
      }
      const arr = []
      if (val.length !== 0) {
        for (var i = 0; i < val.length; i++) {
          arr.push({ name: val[i].quarantReason, value: val[i].count })
        }
      } else {
        arr.push({ name: '暂无数据', value: 0 })
      }

      var option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine4(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine4)
      if (val.length !== 0) {
        this.chartLine4 = true
      }
      const arr = []

      if (val.length !== 0) {
        for (var i = 0; i < val.length; i++) {
          arr.push({ name: val[i].fromArea, value: val[i].count })
        }
      } else {
        arr.push({ name: '暂无数据', value: 0 })
      }
      var option = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          position: ['50%', '50%']
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine6(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine6)
      if (val.length !== 0) {
        this.chartLine6 = true
      }
      var option = {
        xAxis: {
          type: 'category',
          data: ['今日解除隔离', '累计解除隔离']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: val,
            type: 'bar',
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: { // 上方显示数值
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  },
                  color: '#FF0000'
                }
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine66(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine66)
      if (val.length !== 0) {
        this.chartLine66 = true
      }
      var option = {
        xAxis: {
          type: 'category',
          data: ['今日新增境内', '今日新增总计']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: val,
            type: 'bar',
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: { // 上方显示数值
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  },
                  color: '#FF0000'
                }
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine666(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine666)
      if (val.length !== 0) {
        this.chartLine666 = true
      }
      var option = {
        xAxis: {
          type: 'category',
          data: ['累计境内隔离人数', '累计境外隔离人数']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: val,
            type: 'bar',
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: { // 上方显示数值
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 16
                  },
                  color: '#FF0000'
                }
              }
            }
          }
        ]
      }
      myChart.setOption(option, true)
    },
    drawLine6666(val) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.chartLine6666)
      const arr = []
      const titleArr = ['当前隔离人数', '今日新增隔离人数', '累计隔离人数', '今日解除隔离人数', '累计解除隔离人数', '今日新增境内隔离人数', '今日新增境外隔离人数', '隔离点总数']
      if (val.count.length !== 0) {
        this.chartLine6666 = true

        val.count.forEach((item, index) => {
          arr.push(
            {
              name: titleArr[index],
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: item
            }
          )
        })
      }
      this.chartLine6666 = true
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: val.name
        },
        series: arr
      }
      myChart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>

.dataStatistics {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    margin-top: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    >div:nth-child(1){
      padding-top:40px;
    }
    .cardEcharts{
      // width:calc(100% + 400px);
      width:100%;
      height:800px;
      padding:20px 10px;
      box-sizing: border-box;
    }
    .cardEcharte{
      // width:calc(100% + 400px);
      width:calc(100% + 200px);
      min-height:6900px;
      padding:20px 10px;
      box-sizing: border-box;
    }
    // .cardEchartee{
    //   // width:calc(100% + 400px);
    //   width:100%;
    //   min-height:6600px;
    //   padding:20px 10px;
    //   box-sizing: border-box;
    //   overflow-x: scroll;
    // }
    .title{
      //  width:calc(100% + 200px);
      width:100%;
       text-align:center;
       display:flex;
       align-items:center;
       justify-content:center;
       >div{
         padding:10px 20px;
         border-radius:10px;
         color:#195CED;
         border:1px solid #195CED;
       }
    }
  }
}
</style>
